<template>
  <div class="nav-box">
    <!-- <div class="moment-count">

            <div class="pot"></div>

            <div class="text">2001,258 are matching now!</div>

            <div class="line"></div>

        </div> -->

    <nav class="nav">
      <div
        :class="['nav-item', clickIndex === index ? 'active' : '']"
        v-for="(item, index) in navList"
        :key="item.text"
        @click="goPage(index)"
      >
        <div class="img">
          <img :src="item.imgActive" v-if="clickIndex === index" />

          <img v-else :src="item.img" />
        </div>

        <div class="word">{{ item.text }}</div>
      </div>
    </nav>
  </div>
</template>

<script setup lang="ts">
import videoImg from "@/assets/icon/video-chat.svg";
import videoImgActive from "@/assets/icon/video-chat-active.svg";
import liveImg from "@/assets/icon/live.svg";
import liveImgActive from "@/assets/icon/live-active.svg";
import historyImg from "@/assets/icon/history.svg";
import historyImgActive from "@/assets/icon/history-active.svg";
import { useRouter, useRoute } from "vue-router";
import { reactive, ref, onBeforeMount } from "vue";
const router = useRouter();
const route = useRoute();
const navList = reactive([
  {
    text: "Video Chat",
    img: videoImg,
    imgActive: videoImgActive,
    urlName: "Home",
  },
  {
    text: "Live",
    img: liveImg,
    imgActive: liveImgActive,
    urlName: "Live",
  },
  {
    text: "History",
    img: historyImg,
    imgActive: historyImgActive,
    urlName: "History",
  },
]);
const clickIndex = ref<number>();

onBeforeMount(() => {
  clickIndex.value = navList.findIndex((item) => {
    return item.urlName === route.name;
  });
});

const goPage = (index: number) => {
  clickIndex.value = index;
  const currentUrlName = navList[index].urlName;
  router.push({ name: currentUrlName });
};
</script>

<style lang="less" scoped>
.nav-box {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 10;
  .moment-count {
    border-radius: 10px 10px 0 0;
    background-color: rgb(20, 20, 20);
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    position: relative;

    .pot {
      border-radius: 100%;
      height: 8px;
      width: 8px;
      background: rgb(0, 246, 157);
      margin-top: 4px;
      margin-right: 5px;
    }

    .text {
      color: rgb(255, 255, 255);
      font-size: 13px;
      line-height: 16px;
    }

    .line {
      width: 94%;
      height: 1px;
      background-color: rgb(40, 40, 40);
      position: absolute;
      bottom: 0;
      left: 3%;
      z-index: 1;
    }
  }

  .nav {
    background-color: rgb(20, 20, 20);
    display: flex;

    .nav-item {
      flex: 1;
      padding: 10px 0;

      .img {
        display: flex;
        justify-content: center;
        img {
          width: 26px;
          height: 26px;
        }
      }

      .word {
        color: rgb(136, 136, 136);
        font-size: 12px;
        line-height: 14px;
        display: flex;
        justify-content: center;
      }
    }

    .nav-item.active {
      .word {
        color: rgb(255, 255, 255);
        font-weight: bold;
      }
    }
  }
}
</style>
